<template>
  <div>
    <el-date-picker
      v-model="times"
      :type="dateType"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right"
      :value-format="format"
      @change="changeTime"
    >
      >
    </el-date-picker>
  </div>
</template>

<script>
import { startAndEnd } from "@/api/bpm/time";
export default {
  name: "EryuoaStoreManageBackendTimer",
  props: {
    format: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss",
    },

    defaultTime: {
      type: Array,
      default: () => {
        return [];
      },
    },

    flag: {
      type: String,
      default: "B",
    },

    timer: {
      type: Array,
      default: () => {
        return [];
      },
    },

    Option: {
      type: Array,
      default: () => {
        return ["today", "yesterToday", "week", "beforeMonth", "nextMonth"];
      },
    },

    dateType: {
      type: String,
      default: "datetimerange",
    },

    isCheck: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      pickerOptions: {
        // shortcuts: [],
        onPick: (e) => {
          this.onPickDateTime(e);
        },
      },
      defaultTimeRange: [],
      times: [],
      today: {
        text: "今日",
        onClick: (picker) => {
          this.startAndEnds("T");
        },
      },
      yesterToday: {
        text: "昨日",
        onClick: (picker) => {
          this.startAndEnds("B");
        },
      },

      week: {
        text: "本周",
        onClick: (picker) => {
          this.startAndEnds("W");
        },
      },

      beforeMonth: {
        text: "本月",
        onClick: (picker) => {
          this.startAndEnds("TM");
        },
      },

      nextMonth: {
        text: "上一月",
        onClick: (picker) => {
          this.startAndEnds("BM");
        },
      },
    };
  },

  watch: {
    timer: {
      handler(newVal, oldVal) {
        console.log(newVal, "aa");
        console.log(oldVal, "bb");
        this.times = newVal;
        this.$emit("query");
        // console.log(newVal, "aa");
      },

      deep: true,
    },
    // times: {
    //   handler(newVal, oldVal) {
    //     // console.log(newVal, "aaa");
    //     // this.$emit("update:timer", newVal);
    //   },
    //   deep: true,
    // },
  },
  created() {
    if (this.isCheck === true) {
      this.startAndEnds(this.flag);
    }

    let pickerOption = [];
    for (let index = 0; index < this.Option.length; index++) {
      const element = this.Option[index];
      if (element === "today") {
        pickerOption.push(this.today);
      } else if (element === "yesterToday") {
        pickerOption.push(this.yesterToday);
      } else if (element === "week") {
        pickerOption.push(this.week);
      } else if (element === "beforeMonth") {
        pickerOption.push(this.beforeMonth);
      } else if (element === "nextMonth") {
        pickerOption.push(this.nextMonth);
      } else if (element === "BeforeWeek") {
        pickerOption.push(this.BeforeWeek);
      }
    }
    this.pickerOptions.shortcuts = pickerOption;
  },
  mounted() {},
  methods: {
    changeTime() {
      this.$emit("update:timer", this.times);
    },
    startAndEnds(flag) {
      startAndEnd({
        flag: flag,
        format: this.format,
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            let times = [];
            times[0] = data.startTime;
            times[1] = data.endTime;

            this.times = times;
            this.changeTime();
          }
        })
        .catch((err) => {});
    },

    onPickDateTime(e) {
      if (!!e.maxDate && !!e.minDate && this.dateType === "datetimerange") {
        let oldSTime = "";
        let oldETime = "";
        let times = this.times;
        if (!!times && times.length > 0) {
          if (!!times[0]) {
            let s = times[0].split(" ");
            if (!!s[1]) {
              oldSTime = s[1];
            }
          }

          if (!!times[1]) {
            let e = times[1].split(" ");
            if (!!e[1]) {
              oldETime = e[1];
            }
          }
        }

        let newSTime = this.FItem(e.minDate);
        let newETime = this.FItem(e.maxDate);

        let newMinTime = newSTime + " " + (!!oldSTime ? oldSTime : "00:00:00");
        let newMaxTime = newETime + " " + (!!oldETime ? oldETime : "00:00:00");

        setTimeout(() => {
          this.times = [newMinTime, newMaxTime];
        }, 50);

        console.log(newMinTime, newMaxTime);
      }
    },

    FItem(date) {
      let objdate = new Date(date);
      let year = objdate.getFullYear();
      let moth =
        objdate.getMonth() + 1 <= 9
          ? "0" + (objdate.getMonth() + 1)
          : objdate.getMonth() + 1;
      let day =
        objdate.getDate() <= 9 ? "0" + objdate.getDate() : objdate.getDate();

      return year + "-" + moth + "-" + day;
    },
  },
};
</script>

<style lang="scss" scoped></style>
